@import './static/css/reset.styl';
@import './static/css/flex.styl';
@import './static/css/float.styl';
@import './static/css/spacing.styl';
@import './static/css/position.styl';
@import './static/css/shadow.styl';
@import './static/css/text.styl';
@import './static/css/border.styl';

._h1 {
  font-size: 14pt;
}

._h2 {
  font-size: 12pt;
}

.font-large {
  font-size: 14pt;
}

.font-medium {
  font-size: 12pt;
}

.font-small {
  font-size: 9pt;
}

.font-color-light {
  color: #999999;
}

textarea {
  min-height: 50px !important;
}

.big-avatar {
  width: 48px;
  height: @width;
  border-radius: 50%;
}

.medium-avatar {
  width: 40px;
  height: @width;
  border-radius: 50%;
}

.small-avatar {
  width: 36px;
  height: @width;
  border-radius: 50%;
}

.bottom-left-pos-icon {
  position: absolute;
  width: 26px;
  height: 26px;
  bottom: 0px;
  left: -5px;
}

.teacher-icon {
  position: absolute;
  width: 29px;
  height: 29px;
  left: -15px;
  top: 6px;
}

/* *  app * */
.page {
  .page-header {
    width: 355px;

    .page-header-content {
      padding: 24px 0px 12px 20px;
      height: 60px;
    }

    .user-attach-info {
      height: 50px;
    }
  }
}

.dialog-index--vant-dialog-class {
  border-radius: 10px !important;
  z-index: 10000 !important;

  button.van-dialog__confirm {
    color: #FF790C !important;
  }
}

.rank-list-item {
  image {
    width: 48px;
    height: @width;
  }
}

.custom-button-success {
  background: no-repeat url($cdn + 'button-success.png');
  background-size: 100% 100%;
  color: #fff;
  height: 100%;
  border-radius: 20px;
}

.custom-button-default {
  background: no-repeat url($cdn + 'button-default.png');
  background-size: 100% 100%;
  color: #000;
  height: 100%;
  border-radius: 20px;
}

.custom-button-active {
  background: no-repeat url($cdn + 'button-active.png');
  background-size: 100% 100%;
  color: #FF790C;
  height: 100%;
  border-radius: 20px;
}

.form-textarea {
  background: #fff;
  min-height: 100px;

  .label {
    margin: 0px 0 0 16px;
    padding-top: 12px;
  }
}

.score-icon2 {
  width: 25px;
  height: 28px;
}

.border-left {
  border-left: 1px solid #D8D8D8;
  height: 80%;
}

.rank-list-bg {
  background: linear-gradient(0deg, #FFB11C, #FF790C);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -11;
}

.rank-list {
  background: #fff;
  border-radius: 4px;

  .rank-list-item {
    padding: 5px 0px;
    margin: 0px 10px;
    border-bottom: 1px solid #E0E0E0;

    .rank-1 {
      background: url($cdn + 'rank-1.png') no-repeat;
      width: 24px;
      height: 32px;
    }

    .rank-1 {
      background: url($cdn + 'rank-1.png') no-repeat;
      width: 24px;
      height: 32px;
    }

    .rank-2 {
      background: url($cdn + 'rank-2.png') no-repeat;
      width: 24px;
      height: 32px;
    }

    .rank-3 {
      background: url($cdn + 'rank-3.png') no-repeat;
      width: 24px;
      height: 32px;
    }

    .rank-default {
      background: url($cdn + 'rank-default.png') no-repeat;
      width: 24px;
      height: 25px;
      text-align: center;
      color: #fff;
      padding-top: 2px;
    }
  }
}

.box {
  box-shadow: 2px 1px 6px 1px rgba(0.1, 0.1, 0.1, 0.1);
  background: #ffffff;
  border-radius: 4px;
  margin: 0 10px;
}

.student-list-item {
  padding-bottom: 10px;

  .student-list-item-header {
    height: 60px;
    background: linear-gradient(90deg, #FFAF4A, #FF6E00);
    border-radius: 8px 8px 0 0;
    color: #fff;
  }

  .student-list-item-content {
    height: 60px;
    border: solid 1px #fadfc9;
    background: #f9f2ed;
    border-radius: 0px 0px 8px 8px;
  }
}

.teacher-current-body {
  .student-list-item {
    margin: 0px 15px;
  }
}

.studentlist-tab-body {
  padding: 10px 0;

  .student-list-item:last-child {
    padding-bottom: 0px;
  }
}

.ability-icon image {
  width: 49px;
  height: 50px;
  margin-top: 3px;
}

.achievement-icon image {
  width: 48px;
  height: 56px;
}

.rank-icon image {
  width: 45px;
  height: 56px;
}

.achievement-icon, .rank-icon {
  ._span {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    text-shadow: 2px 2px #e98700;
    text-align: center;
    width: 100%;
  }
}

.achievement-icon ._span {
  padding-top: 17px;
}

.rank-icon ._span {
  padding-top: 18px;
}

.task-list-header {
  background-color: #ffffff;

  .task-list-header-title {
    height: $task-list-header-title-height;

    .count-down {
      background: no-repeat url($cdn + 'count-down-bg.png');
      background-position: 0 center;
      width: 122px;
      height: 25px;
      color: #fff;
    }
  }

  .task-list-header-th {
    background: #F7F7F7;
    height: $task-list-header-th-height;
  }
}

.student-history-item, .student-ability-item {
  border-radius: 4px;
  background: #fff;
}

.task-quarter-header {
  height: 40px;
  line-height: @height;

  .score {
    background-color: rgb(7, 193, 96);
  }
}

.task-quarter-content {
  background: #F5F5F5;
  border-radius: 8px;
}

.student-ability-item {
  .task-ability-header {
    height: 40px;
    line-height: @height;
    background: linear-gradient(90deg, #7a839f, #454e67);
    border-radius: 8px 8px 0 0;
    color: #fff;
  }

  .task-ability-content {
    border: solid 1px #B7C6F1;
    background: #DFE5F7;
    border-radius: 0px 0px 8px 8px;
  }
}

.teacher-admin-content {
  .student-list-item-header {
    background: linear-gradient(90deg, #7a839f, #454e67);
  }

  .student-list-item-content {
    border: solid 1px #B7C6F1;
    background: #DFE5F7;
  }

  .border-button-active {
    color: #000;
    height: 32px;
    border-radius: 16px;
    border: 1px solid #454e67;
  }
}

.custom-tab-bar.van-tabbar--safe {
  padding-bottom: 0px !important;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.ability-content-warpper {
  position: relative;

  image {
    height: 320px;
    width: 100%;
    color: #fff;
  }

  .ability-content {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}


.task-create-page{
  padding-bottom: 20px

}

.border-button-default{
    background: no-repeat #fff;
    color: #000;
    height: 32px;
    border-radius: 16px;
    border: 1px solid #454e67;
    padding: 0  15px;
}

.border-button-active{
      background: no-repeat #fff;
    color: #FF790C;
    height: 32px;
    border-radius: 16px;
    border: 1px solid #FF790C;
    padding: 0  15px;
}